<template>
  <div class="tw-moblie-screen">
    <div class="tw-parent-btn-img" @click="clickFilter">
      <span>
        {{title}}
      </span>
      <img  v-if="screenImg[0]" :src="`${this.$twApp.fileBaseUrl}${this.screenImg[0].localPath}`" :style="{'height': screenSize}">
    </div>
    <van-popup  id="apply" v-model="showPopupPicker" position="right" :style="{ width: '80%',height:'100%' }" >
      <div class="tw-popup-title">
        {{title}}
      </div>
      <div class="tw-popup-body">
        <div class="tw-popu-bodyContent" v-for="(dataItem , index) in dataSet" :key="dataItem.name">
          <p :class="{'popup-body-title':true,'border-none':index===0}">
            {{dataItem.name}}
          </p>

          <!-- 多选筛选项 -->
          <div class="tw-popup-tagfiters" v-if="dataItem.type === '0'">
            <a :class="{'tw-popup-tag':true , 'tag-active':dataItem.activeId.includes(item.id)}"  v-for="item in dataItem.data" :key="item.id" @click="clickMultiple(item,dataItem)">{{item.name}}</a>
          </div>
          <!-- 多选筛选项 -->

          <!-- 单选筛选项 -->
          <div class="tw-popup-tagfiters" v-if="dataItem.type === '1'">
            <a :class="{'tw-popup-tag':true , 'tag-active':dataItem.activeId === item.id}"  v-for="item in dataItem.data" :key="item.id" @click="clickSingle(item,dataItem)">{{item.name}}</a>
          </div>
          <!-- 单选筛选项 -->

          <!-- 日期选择 -->
          <div class="tw-popup-tagfiters tw-popup-flex" v-if="dataItem.type === '2'">
            <label class=" tw-popup-label" @click="clickCreaTime(dataItem.data[0].startTime,index,'startTime')">{{dataItem.data[0].startTime}}</label>
            <span class="tw-popup-line"></span>
            <label class="tw-popup-label" @click="clickCreaTime(dataItem.data[0].endTime,index,'endTime')">{{dataItem.data[0].endTime}}</label>
          </div>
          <!-- 日期选择 -->

          <!-- 输入框 -->
          <div class="tw-popup-tagfiters" v-if="dataItem.type === '3'">
            <input type="text" v-model="dataItem.data" placeholder="输入要查找的关键字" class="popup-inputText" @focus="focusInput($event)" @blur="blurInput">
          </div>
          <!-- 输入框 -->
        </div>
      </div>

      <div class="tw-popup-bottom">
        <button class="popup-btn-reset" @click="clickReset">重置</button>
        <button class="popup-btn-confirm" @click="clickConfirm">确认</button>
      </div>
    </van-popup>
    <van-popup  v-model="showdatetimePicker" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        @confirm="clickConfirmTime"
        @cancel="showdatetimePicker=false"
        type="date"
        title="选择年月日"
      />
    </van-popup>
  </div>
</template>

<script>
import Picker from 'vant'
import props from './props'
import DatetimePicker from 'vant'
import Vue from 'vue'

Vue.use(Picker, DatetimePicker)
export default {
  name: 'moblie-screen',
  props,
  data() {
    return {
      showPopupPicker: false,
      showdatetimePicker: false,
      // minDate: new Date(2020, 0, 1),
      // maxDate: new Date(2025, 10, 1),
      currentDate: '',
      timeCurrentIndex: '',
      timeCurrentName: ''
    }
  },
  methods: {
    clickFilter() {
      this.showPopupPicker = true
    },

    // 多选点击处理逻辑
    clickMultiple(params, dataItem) {
      if (dataItem.type === '0' && dataItem.activeId.includes(params.id)) {
        dataItem.activeId = dataItem.activeId.filter((item) => {
          if (item !== params.id) {
            return item
          }
        })
        return
      }
      if (dataItem.type === '0' && Array.isArray(dataItem.activeId)) {
        dataItem.activeId.push(params.id)
      }
    },

    // 单选点击处理逻辑
    clickSingle(params, dataItem) {
      this.dataSet.forEach(el => {
        if (el.name === '年级') {
          el.data = this.njMorkData[params.id]
          el.activeId = []
        }
      })
      if (dataItem.type === '1' && (dataItem.activeId && dataItem.activeId === params.id)) {
        dataItem.activeId = ''
        return
      }
      dataItem.activeId = params.id
    },

    clickCreaTime (currentDate, index, name) {
      this.timeCurrentIndex = index
      this.timeCurrentName = name
      this.currentDate = new Date(currentDate.replace(/-/g, '/')) // 兼容ios
      this.showdatetimePicker = true
    },

    // 时间确定
    clickConfirmTime (value) {
      this.dataSet[this.timeCurrentIndex].data[0][this.timeCurrentName] = this.$ui.dateFormat(value, 'yyyy-mm-dd')
      this.showdatetimePicker = false
    },

    // 计算聚焦输入框高度
    focusInput (ele) {
      var popupBody = document.getElementsByClassName('tw-popup-body')
      popupBody[0].setAttribute('style', 'max-height: calc(100vh - 400px);')
      ele.target.scrollIntoView(true)
    },

    // 还原输入框失焦高度
    blurInput () {
      var popupBody = document.getElementsByClassName('tw-popup-body')
      popupBody[0].setAttribute('style', 'max-height: calc(100vh - 120px);')
    },

    // 重置方法
    clickReset () {
      this.dataSet.forEach((el) => {
        if (el.type === '0') {
          el.activeId = []
        } else if (el.type === '1') {
          el.activeId = ''
        } else if (el.type === '2') {
          el.data = [{
            startTime: '',
            endTime: ''
          }]
        } else if (el.type === '3') {
          el.data = ''
        }
      })
    },

    // 确定方法
    clickConfirm () {
      this.$emit('confirmfrom', this.dataSet)
      this.showPopupPicker = false
    }

    // 设置默认时间
    // setDefultTime (){
    //   this.dataSet.forEach(el=>{
    //     if(el.type==='2'&&!el.startTime&&!el.endTime){
    //       var currentDate=new Date()
    //     }
    //   })
    // }
  },
  created() {
    // this.setDefultTime()
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
